<template>
  <div>
    <top :f1="true" :f2="false"></top>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in goodslist"
          :key="item.id"
          @click="gogoods(item.id)"
        >
          <van-image :src="item.img_url" />
          <p>{{ item.title }}</p>
          <div class="button_box">
            <div>
              <span class="span">￥2195</span>
              <s>￥2195</s>
            </div>
            <div class="button">
              <span>热卖中</span>
              <span>剩60件</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <bottom></bottom>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageindex: 0,
      goodslist: [],
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 获取商品列表
    async getGoodsList() {
      const { data: res } = await this.axios.get('/api/getgoods', {
        params: this.pageindex
      })
      this.goodslist = res.message
      console.log(this.goodslist)
    },
    // 上拉加载
    onLoad() {
      setTimeout(() => {
        // 加载状态结束
        this.loading = true
        this.finished = true
      }, 1000)
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false
      }, 1000)
    },
    gogoods(id) {
      this.$router.push(`/goods/detail/${id}`)
    }
  }
}
</script>

<style scoped lang="less">
.van-list {
  margin: 45px 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /deep/.van-cell {
    width: 48%;
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 0;
    align-content: space-between;
    text-align: center;
  }
  .van-image {
    min-height: 180px;
    padding: 10px;
  }
  img {
    min-height: 180px;
    height: 180px;
    margin: auto;
  }
  p {
    padding: 4px 10px;
    font-size :14px;
    height: 49px;
    line-clamp: 2;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
  }
  .button_box {
    width: 100%;
    background: #eee;
    padding: 5px 0;
    div {
      padding: 0 10px;
    }
    .span {
      margin-right: 15px;
      font-size: 16px;
      color: red;
    }
    .button {
      color: black;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
